﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    </style>
</head>
<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格工具栏 -->
                <form class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">登录名称:</label>
                            <div class="layui-input-inline">
                                <input name="UserName" class="layui-input" placeholder="输入名称" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">操作时间:</label>
                            <div class="layui-input-inline">
                                <input name="StartTime" class="layui-input icon-date" placeholder="开始时间"
                                       autocomplete="off" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <input name="EndTime" class="layui-input icon-date" placeholder="结束时间"
                                   autocomplete="off" />
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">请求方法:</label>
                            <div class="layui-input-inline">
                                <input name="ExecuteUrl" class="layui-input" placeholder="输入名称" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">执行状态:</label>
                            <div class="layui-input-inline">
                                <select name="LogStatus">
                                    <option value=""></option>
                                    <option value="0">失败</option>
                                    <option value="1">成功</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn" lay-filter="operatelRecordTbSearch" lay-submit>
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </form>
                <!-- 数据表格 -->
                <table id="apiRecordTable" lay-filter="apiRecordTable"></table>
            </div>
        </div>
    </div>

    <!-- 表单弹窗 -->
    <script type="text/html" id="LogApiDetail">
        <form class="layui-form model-form">
            <div class="layui-form-item">
                <label class="layui-form-label">URL:</label>
                <div class="layui-input-block">
                    <input id="URL" class="layui-input" readonly />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">执行状态:</label>
                <div class="layui-input-block">
                    <input id="ExStatus" class="layui-input" readonly />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请求参数:</label>
                <div class="layui-input-block">
                    <pre class="layui-code" id="ExecuteParam"></pre>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出错信息:</label>
                <div class="layui-input-block">
                    <pre class="layui-code" id="ExecuteResult"></pre>
                </div>
            </div>
        </form>
    </script>

    <!-- 表格操作列 -->
    <script type="text/html" id="TbBar">
        <a class="layui-btn layui-btn-sm" lay-event="detail">详情</a>
    </script>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>
        var table;

        layui.use(['layer', 'form', 'table', 'util', 'laydate', 'tableX', 'admin', 'setter', 'code'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var util = layui.util;
            var laydate = layui.laydate;
            var tableX = layui.tableX;
            var admin = layui.admin;
            var setter = layui.setter;
            layui.code();
            table = layui.table;

            // 初始设定
            layuiTableSet();

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#apiRecordTable',
                url: setter.baseServer + '/SystemManage/LogApi/GetPageListJson',
                page: true,
                limit: 15,
                limits: [12, 24, 36, 48, 60],
                cols: [[
                    { type: 'checkbox' },
                    {
                        field: 'UserName', title: '登录名称', sort: true, templet: function (d) {
                            if (d.WeChatName != null && d.WeChatName != '') {
                                return d.WeChatName;
                            } else {
                                return d.UserName == null ? "" : d.UserName;
                            }
                        }
                    },
                    { field: 'IpAddress', title: 'IP地址' },
                    { field: 'IpLocation', title: 'IP定位' },
                    { field: 'ExecuteUrl', title: 'Url', width: 500 },
                    { field: 'ExecuteTime', title: '耗时（ms）' },
                    {
                        field: 'LogStatus', title: '执行状态', sort: true, templet: function (d) {
                            if (d.LogStatus == 1) {
                                return '<span class="layui-badge layui-badge-blue">成功</span>';
                            } else {
                                return '<span class="layui-badge layui-badge-red">失败</span>';
                            }
                        }
                    },
                    {
                        field: 'CreateTime', title: '操作时间', templet: function (d) {
                            
                            return util.toDateString(d.CreateTime, 'yyyy-MM-dd HH:mm:ss');
                        }, sort: true
                    },
                    { title: '操作', toolbar: '#TbBar', align: 'center', width: 100 }
                ]]
            });

            laydate.render({ elem: 'input[name=StartTime]', format: 'yyyy-MM-dd' });
            laydate.render({ elem: 'input[name=EndTime]', format: 'yyyy-MM-dd' });

            /* 表格搜索 */
            form.on('submit(operatelRecordTbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 导出excel */
            $('#apiRecordExportBtn').click(function () {
                var checkRows = table.checkStatus('apiRecordTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要导出的数据', { icon: 2 });
                } else {
                    tableX.exportDataX({
                        cols: insTb.config.cols,
                        data: checkRows.data,
                        fileName: '登录日志'
                    });
                }
            });

            $("#RemoveAllApiRecord").click(
                function () {
                    layer.confirm('确认是否清空数据？', { icon: 3, title: '提示' }, function (index) {
                        admin.req('/SystemManage/LogApi/RemoveAllFormJson', function (res) {
                            if (res.Tag == 1) {
                                layer.msg("操作成功", { icon: 1 });
                                insTb.reload();
                            } else {
                                layer.msg(res.Message, { icon: 2 });
                            }
                        }, 'post');
                        layer.close(index);
                    });
                }
            );

            table.on('tool(apiRecordTable)', function (obj) {
                if (obj.event === 'detail') {
                    var data = obj.data;

                    if (data.LogStatus == 1) {
                        admin.open({
                            type: 1,
                            title: '详情',
                            content: $('#LogApiDetail').html(),
                            area: ['650px', '444px'],
                            success: function (layero, dIndex) {
                                $('#LogApiDetail').val(data.UserName);
                                $('#URL').val(data.ExecuteUrl);
                                $('#ExStatus').val('成功');

                                $('#ExecuteParam').html(UrlParamToJsonStr(data.ExecuteParam));
                                $('#ExecuteResult').closest('.layui-form-item').remove()
                            },
                        });
                    } else {
                        admin.open({
                            type: 1,
                            title: '详情',
                            content: $('#LogApiDetail').html(),
                            area: ['66%', '555px'],
                            success: function (layero, dIndex) {
                                $('#LogApiDetail').val(data.UserName);
                                $('#URL').val(data.ExecuteUrl);
                                $('#ExStatus').val('失败');

                                $('#ExecuteParam').html(data.ExecuteParam);
                                $('#ExecuteResult').html(data.ExecuteResult);
                            },
                        });
                    }
                }
            });
        });

        function UrlParamToJsonStr(param) {
            if (param && param.substr(0, 1) == '?') {
                let arr = param.split("?")[1].split("&");
                let obj = {};
                for (let i of arr) {
                    obj[i.split("=")[0]] = i.split("=")[1];
                }
                return formatJson(obj);
            }
            else {
                return param;
            }
        }

        function formatJson(msg) {
            var rep = '~';
            var jsonStr = JSON.stringify(msg, null, rep)
            var str = '';
            for (var i = 0; i < jsonStr.length; i++) {
                var text2 = jsonStr.charAt(i)
                if (i > 1) {
                    var text = jsonStr.charAt(i - 1)
                    if (rep != text && rep == text2) {
                        //  str += '<br  style="margin:5px"/>'
                    }
                }
                str += text2;
            }
            jsonStr = '';
            for (var i = 0; i < str.length; i++) {
                var text = str.charAt(i);
                if (rep == text) { jsonStr += '&nbsp;&nbsp;&nbsp;&nbsp;' } else {
                    jsonStr += text;
                }
                if (i == str.length - 2) {
                    // jsonStr += '<br style="margin:5px" />'
                }
            }
            return jsonStr;
        }

    </script>
</body>
</html>